import useAsyncEffect from "@/hooks/useAsyncEffect";
import type { ColumnsType } from "antd/lib/table";
import { Table } from "antd";
import React, { useState } from "react";

interface DataType {
  id: number;
  name: string;
  email: string;
  address: {
    street: string;
    city: string;
  };
  phone: string;
  website: string;
}

const UseAsyncEffect: React.FC = () => {
  const [tableData, setTable] = useState<DataType[]>([]);

  const columns: ColumnsType<DataType> = [
    {
      title: "name",
      dataIndex: "name"
    },
    {
      title: "email",
      dataIndex: "email"
    },
    {
      title: "city",
      dataIndex: "address",
      render: text => text.city
    },
    {
      title: "phone",
      dataIndex: "phone"
    },
    {
      title: "website",
      dataIndex: "website"
    }
  ];

  useAsyncEffect(async () => {
    const data = await fetch("https://jsonplaceholder.typicode.com/users");
    const json = await data.json();
    setTable(json);
  }, []);

  console.log("render");

  return (
    <>
      <h3>UseAsyncEffect</h3>
      <Table bordered columns={columns} rowKey="id" dataSource={tableData} />
    </>
  );
};
export default UseAsyncEffect;
